<template>
	<div>
		<swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
			    <swiper-slide><img src="http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb" alt=""></swiper-slide>
			    <swiper-slide><img src="http://st.depositphotos.com/thumbs/1657765/image/1384/13847418/api_thumb_450.jpg!thumb" alt=""></swiper-slide>
			    <swiper-slide><img src="http://st2.depositphotos.com/thumbs/1400069/image/6786/67868297/api_thumb_450.jpg!thumb" alt=""></swiper-slide>
			    <swiper-slide><img src="http://st.depositphotos.com/thumbs/1817356/image/4142/41424313/api_thumb_450.jpg!thumb" alt=""></swiper-slide>
			    <!-- Optional controls -->
			    <div class="swiper-pagination"  slot="pagination"></div>
			    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
			    <div class="swiper-button-next" slot="button-next"></div> -->
		  </swiper>
		 <ul id="details">
	 		<li v-for="item in items"><router-link :to="item.href">{{item.title}}</router-link></li>
		 </ul>
	</div>
</template>
<script>
import {swiperSlide } from 'vue-awesome-swiper'
export default{
	data () {
		return {
			items:[],
			swiperOption: {
				// notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
				notNextTick: true,
				// swiper configs 所有的配置同swiper官方api配置
				autoplay: 3000,
				direction : 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
				grabCursor : true,
				setWrapperSize :true,
				autoHeight: true,
				pagination : '.swiper-pagination',
				paginationClickable :true,
				loop : true,//环路
				//prevButton:'.swiper-button-prev',
				//nextButton:'.swiper-button-next',
				//scrollbar:'.swiper-scrollbar',
				mousewheelControl : true,
				observeParents:false,
				// if you need use plugins in the swiper, you can config in here like this
				// 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
				debugger: true,
	        }
		}
	},
 	mounted:function(){
			// GET /someUrl
		this.$http.get('../../static/list.json').then(response => {
		    // get body data
		    //console.log(response.body.items)
		    this.items = response.body.items;
		    
	  	}, response => {
		    // error callback
	  	});
    },
    components: {
   	 	swiperSlide
 	},
}
</script>

<style scoped>
	img{width: 100%;height: 100%;}
	#details{padding-left: 15px}
	#details li{line-height: 35px;border-bottom: 1px solid #666;}
	#details li>a{height: 35px;line-height: 35px;font-size: 18px;color: #000;padding-left: 10px;text-decoration: none}
	#details li>a:hover{text-decoration:underline;}
</style>